<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ITSM系统</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 必须先引入vue,后使用element-ui -->
    <script src="../js/common/vue.min.js"></script>
    <!--引入 element-ui 的样式-->
    <link rel="stylesheet" href="../js/common/element-ui_lib_theme-chalk_index.css">
    <!-- 引入element组件库-->
    <script src="../js/common/element-ui_lib_index.js"></script>
    <script src="../js/common/axios.min.js"></script>
</head>

<body class="hold-transition login-page" style="background:#3285d9">
<div id="app">

    <el-card class="box-card" style="margin-top: 12%; width:400px; margin-left: 25%" shadow="hover">
        <span slot="header">ITSM系统</span>
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login" style="width: 300px; margin: auto">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>

<script type="module">
    import api from '../js/common/api.js'

    const vm = new Vue({
        el: '#app',
        data: function () {
            return {
                ruleForm: {
                    username: 'admin',
                    password: 'admin',
                    age: ''
                }
            }
        },

        // data: {
        //     username: 'admin',
        //     password: 'admin',
        //     captcha: '',
        //     error: false,
        //     errorMsg: '',
        //     isRememberMe: false,
        //     src: 'login/captcha'
        // },
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            refreshCode: function () {
                this.src = "login/captcha?t=" + $.now();
            },
            login () {
                const self = this
                // var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha + "&isRememberMe=" + vm.isRememberMe;
                let data = "username=" + this.ruleForm.username + "&password=" + this.ruleForm.password;
                api.login(data).then(res => {
                    if (res.code === 20000) {
                        self.$message.success('登录成功')
                        // parent.location.href = 'index';
                        parent.location.href = 'index';
                    }
                });
                // $.ajax({
                //     type: "POST",
                //     url: "login/login",
                //     data: data,
                //     dataType: "json",
                //     success: function (result) {
                //         if (result.code === 20000) {//登录成功
                //             self.$message.success('登录成功')
                //             parent.location.href = 'index';
                //         } else {
                //             self.$message.error(result.message)
                //             // vm.error = true;
                //             // vm.errorMsg = result.msg;
                //             // vm.refreshCode();
                //         }
                //     }
                // });
            }
        }
    });
</script>
</body>
</html>
